<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.skin_wrap ul{
				list-style: none;
			}
			.skin_wrap ul li{
				width: 100px;
				height: 50px;
				text-align: center;
				float: left;
				margin: 2px auto;
			}
			.skin_wrap ul li a{
				text-decoration: none;
				color: cadetblue;
				font-size: 20px;
				line-height: 50px;
			}
			.skin_wrap{
				width: 100%;
				height: 200px;
				background-color:pink;
				display: none;
			}
			.wrap{
				width: 100%;
				height: 30px;
				/* background-color: skyblue; */
			}
			.wrap ul{
				list-style: none;
			}
			.wrap ul li{
				width: 100px;
				height: 50px;
				text-align: center;
				float: left;
				margin: 19px 10px 0 0;
			}
			.wrap ul li a{
				text-decoration: none;
				color: black;
				font-size: 13px;
				line-height: 30px;
				
			}
		</style>
	</head>
	<body>
		<div id="skin_wrap" class="skin_wrap">
			<ul id="skin_list" class='skin_list'>
				<li>
					<a href="#">pink</a>
				</li>
				<li>
					<a href="#">skyblue</a>
				</li>
				<li>
					<a href="#">green</a>
				</li>
				<li>
					<a href="#">white</a>
				</li>
				<li>
					<a href="#">orange</a>
				</li>
			</ul>
		</div>
		<div id="wrap" class="wrap">
			<ul id="content">
				<li>
					<a href="#">Baidu</a>
				</li>
				<li>
					<a href="#">图片</a>
				</li>
				<li>
					<a href="#">知乎</a>
				</li>
				<li>
					<a href="#">换肤</a>
				</li>
				<li>
					<a href="#">学术</a>
				</li>
			</ul>
		</div>
		
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// color_list = ['pink','skyblue','green','white','orange']
				// var isDown = false;
				$('#content li:eq(3)').click(function(event){
					event.preventDefault()
					event.stopPropagation()
					$('#skin_wrap').slideDown()
					$('#wrap').hide()
				})
				$(document).click(function(event){
					event.preventDefault()
					event.stopPropagation()
					$('#skin_wrap').slideUp()
					$('#wrap').show()
					// return false;
				})
				$('#skin_list li a').click(function(event){
					event.preventDefault()
					event.stopPropagation()
					$('body').css('backgroundColor',this.text)
				})
				$('#skin_wrap').click(function(){
					return false;
				})
			})
		</script>
	</body>
</html>
